<template>
  <div class="index-ChartDataAnaly">
    <div class="index-interior-title-box">
      <div class="index-interior-title-bg"></div>
      <div class="index-interior-title-left" style="color: white;">面积图</div>
    </div>
    <div ref="chartRef" class="index-ChartDataAnaly-chart"></div>
  </div>
</template>

<script setup>
import * as echarts from 'echarts'
import { ref, reactive, getCurrentInstance, onMounted, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'
const { proxy } = getCurrentInstance()
const router = useRouter()

const chartRef = ref(null)
let mapChart = null

// 数据
let xLabel = ['5月', '6月', '7月', '8月', '9月', '10月', '11月']
// let goToSchool = ['10', '20', '30', '40', '50', '60', '70'] 原来的每日增长率数据
let goOutSchool = ['20', '35', '34', '60', '58', '88', '98']

let series = [
  // {
  //   name: '每日增长率',
  //   type: 'line',
  //   symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
  //   showAllSymbol: true,
  //   symbolSize: 0,
  //   smooth: true,
  //   lineStyle: {
  //     width: 1,
  //     color: '#F4B566FF', // 线条颜色
  //     borderColor: 'rgba(0,0,0,.4)'
  //   },
  //   tooltip: {
  //     show: true
  //   },
  //   areaStyle: {
  //     //区域填充样式
  //     //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
  //     color: new echarts.graphic.LinearGradient(
  //       0,
  //       0,
  //       0,
  //       1,
  //       [
  //         {
  //           offset: 0,
  //           color: '#3A3025FF'
  //         },
  //         {
  //           offset: 1,
  //           color: '#3A302500'
  //         }
  //       ],
  //       false
  //     )
  //   },
  //   data: goToSchool
  // },
  {
    name: '项目增长率',
    type: 'line',
    symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
    showAllSymbol: true,
    symbolSize: 0,
    smooth: true,
    lineStyle: {
      width: 1,
      color: '#23F0FDFF', // 线条颜色
      borderColor: 'rgba(0,0,0,.4)'
    },
    tooltip: {
      show: true
    },
    areaStyle: {
      //区域填充样式
      //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
      color: new echarts.graphic.LinearGradient(
        0,
        0,
        0,
        1,
        [
          {
            offset: 0,
            color: '#2D7478FF'
          },
          {
            offset: 1,
            color: '#152A2C5C'
          }
        ],
        false
      )
    },
    data: goOutSchool
  }
]
//					<div class="index-item"><div class="index-item-icon" style="background-color: #F4B566FF;"></div>${params[1].seriesName}<div class="index-item-value">${params[1].value}%</div> </div>
let option = {
  tooltip: {
    show: true,
    trigger: 'axis',
    confine: true,
    extraCssText: 'padding: 0;border: none;',
    backgroundColor: 'rgba(1,1,1,0.7)',
    formatter: function (params) {
      // console.log(789, params);
      let tooltipHtml = `<div class="index-ChartDataAnaly-tooltip">
					<div>2023-${params[0].axisValue}-23</div>
					<div class="index-item"><div class="index-item-icon" style="background-color: #23F0FDFF;"></div>${params[0].seriesName}<div class="index-item-value">${params[0].value}%</div> </div>
      </div>`

      return tooltipHtml
    },

    //提示内容样式
    textStyle: {
      color: '#fff'
    },
    tooltip: {
      position: ['20%', '5%']
    }
  },
  grid: {
    top: '15%',
    bottom: '0%',
    left: '0%',
    right: '0%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      boundaryGap: false,
      axisLabel: {
        color: '#C2AA90',
        fontSize: 10
      },
      axisTick: {
        alignWithLabel: true
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: '#7C6951'
        }
      },
      data: xLabel
    }
  ],
  yAxis: [
    {
      type: 'value',
      min: 0,
      max: 100,
      axisLabel: {
        formatter: '{value}%',
        color: '#C2AA90',
        fontSize: 10
      },
      splitLine: {
        lineStyle: {
          type: 'dashed',
          color: 'rgba(207,166,114,0.4)'
        }
      }
    },
    {
      type: 'value',
      min: 0,
      max: 100,
      axisLabel: {
        formatter: '{value}',
        color: '#C2AA90FF',
        fontSize: 10
      },
      splitLine: {
        show: false
      }
    }
  ],
  series: series
}



const resizeHandler = () => {
  mapChart.resize()
}
const renderMap = () => {
  if (!mapChart) {
    mapChart = echarts.init(chartRef.value, null, {
      renderer: 'svg'
    })
  }
  mapChart.dispatchAction({
    type: 'restore'
  })
  mapChart.setOption(option)
  let i = 0;
  setInterval(() => {
    if (i > 7) {
      i = 0;
    }
    mapChart.dispatchAction({
      type: "showTip",
      seriesIndex: 0,
      dataIndex: i,
    });
    i++;
  }, 3000);
  mapChart.dispatchAction({ type: 'dataZoom', start: 0, end: 100 })
}
onMounted(() => {
  renderMap()
  window.addEventListener('resize', resizeHandler)
})
onUnmounted(() => {
  clearInterval(setInterval)
  window.removeEventListener('resize', resizeHandler)
})
</script>

<style lang="scss">
.index-ChartDataAnaly {
  width: 100%;
  height: 100%;
  display: flex;
  box-sizing: border-box;
  overflow: hidden;
  flex-direction: column;

  .index-ChartDataAnaly-chart {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 0 12px;
    // border: 1px solid red;
  }

  .index-ChartDataAnaly-tooltip {
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, #1c1711 0%, #18150f 100%);
    box-shadow: 0px 2px 8px 0px rgba(235, 94, 18, 0.09);
    border-radius: 6px 6px 6px 6px;
    border: 1px solid #dda862;
    padding: 12px 18px;
    color: #ecf8ffe6;

    .index-item {
      display: flex;
      align-items: center;

      .index-item-icon {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        margin-right: 5px;
      }

      .index-item-value {
        margin-left: 10px;
      }
    }
  }
}
</style>
